// 入口函数
$(function () {
    // ajax参数多出都用得到, 所以定义为全局变量
    let q = {
        pagenum: 1,        // int	页码值
        pagesize: 5,       // int	每页显示多少条数据
        cate_id: '',       // string	文章分类的 Id
        state: ''          // string	文章的状态，可选值有：已发布、草稿
    }

    // 需求1: 渲染文章列表所有数据
    initArticleList()
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }

            // 渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>
                            <a href="javascript:;">${ele.title}</a>
                        </td>
                        <td>${ele.cate_name}</td>
                        <td>${formDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <button data-id="${ele.Id}" class=" btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `)
            })

            $('tbody').empty().html(arr.join(''))

            // 初始化完毕之后, 进行分页
            renderPage(res.data.total)
        })
    }


    let layer = layui.layer
    let form = layui.form
    // 需求2: 分类渲染
    initArtCateList()
    function initArtCateList() {
        // 发送ajax
        axios({
            method: 'GET',
            url: '/my/article/cates',
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }

            let arr = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                `)
            })

            // 循环完成之后
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            // form.render() 方法可以渲染 select / checkbox / radio
            // 本质: 根据select标签生成 dl套dd标签
            form.render()
        })
    }

    // 需求3: 完成筛选功能
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        // console.log($('[name=cate_id]').val());
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        // console.log(q);
        // 重新渲染文章列表
        initArticleList()
    })
    $('#searchForm').on('reset', function (e) {
        e.preventDefault()
        q.cate_id = ''
        q.state = ''
        // 重新渲染文章列表
        initArticleList()
    })


    // 需求4: 分页
    function renderPage(total) {
        let laypage = layui.laypage
        // 执行一个page实例 
        laypage.render({
            elem: 'pageBox',  // 注意这里的pageBox是  ID, 不用加 #
            count: total, // 数据总数, 从服务器得到
            limit: q.pagesize, // 每页显示多少条
            curr: q.pagenum,  // 第几页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                if (!first) {
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        })
    }

    // 需求5: 删除
    $('tbody').on('click', '.btn-del', function () {
        let id = $(this).attr('data-id')

        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }

                layer.msg('恭喜您, 删除文章成功!')
                // BUG 解决
                // 再次刷新页面之前, 判断pagenum--
                // 发送ajax, 后端删除, 但前端还在
                // 页面中只有一个元素, 而我受到删除成功的相应
                // if ($('.btn-del').length === 1 && q.pagenum > 1) {
                //     q.pagenum--
                // }

                // 优化: 短路运算
                $('.btn-del').length === 1 && q.pagenum > 1 && q.pagenum--
                initArticleList()
            })
            layer.close(index)
        })
    })

})